<template>
	<view class="content">
    <view class="aaaa">
      <u-navbar class="bbbb">
        <view
            class="u-nav-slot"
            slot="left"
        >
          <u-icon
              name="list"
              size="25"
          ></u-icon>
          <!--        <u-line-->
          <!--            direction="column"-->
          <!--            :hairline="false"-->
          <!--            length="16"-->
          <!--            margin="0 8px"-->
          <!--        ></u-line>-->
        </view>
        <view
            :author="current.author"
            class="u-nav-slot-center"
            slot="center"
        >
          <u-search placeholder="请输入"
                    search="onSearch"
          >
          </u-search>
        </view>
        <view
            class="u-nav-slot-right"
            slot="right"
        >
          <u-icon
              name="mic"
              size="25"
          ></u-icon>
        </view>
      </u-navbar>
      <view>
        <view class="u-demo-block__content">
          <u-row customStyle="margin-bottom: 10px">
            <u-col span="9">
              <view class="demo-layout bg-purple">
                <u-icon
                    class="all"
                    name="play-circle"
                    size="30"
                    color="#20d39b"
                ></u-icon>
                <u--text class="aaa" text="全部播放(1540)" margin="10px"></u--text>
              </view>
            </u-col>
            <u-col span="1">
              <view class="demo-layout bg-purple-light">
                <u-icon name="list" size="25"></u-icon>
              </view>
            </u-col>
            <u-col span="1">
              <view class="demo-layout bg-purple-dark">
                <u-icon name="download" size="25"></u-icon>
              </view>
            </u-col>
            <u-col span="1">
              <view class="demo-layout bg-purple-dark">
                <u-icon name="list-dot" size="25"></u-icon>
              </view>
            </u-col>
          </u-row>
          <view class="mc-list" v-for="(indexList, index) in indexList" :key="index">
            <u-cell-group>
              <u-cell title="indexList.name" label="李响.第七颗星星" iconStyle="play-right-fill">
                <u-icon slot="right-icon" size="25" name="rewind-right-fill"></u-icon>
                <u-icon slot="right-icon" size="25" name="skip-forward-right"></u-icon>
                <u-icon slot="right-icon" size="25" name="list-dot"></u-icon>
              </u-cell>
            </u-cell-group>
          </view>
        </view>
      </view>
      <view class="ad-width">
        <audio class="uni-audio-default" src=""
               :poster="current.poster"
               :name="current.name" controls
        >

        </audio>
      </view>
    </view>

<!--		<u-tabbar-->
<!--			:value="value6"-->
<!--			@change="name => value6 = name"-->
<!--			:fixed="true"-->
<!--			:placeholder="true"-->
<!--			:safeAreaInsetBottom="true"-->
<!--		>-->
<!--			<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>-->
<!--			<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>-->
<!--			<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>-->
<!--			<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>-->
<!--		</u-tabbar>-->
	</view>
</template>

<script>
	import UviewUi from "uview-ui/components/uview-ui/uview-ui";
  import UIcon from "uview-ui/components/u-icon/u-icon";
  export default {
    components: {UIcon, UviewUi},
    data() {
			return {
				value6: 0,
        list: [
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/39bb34167f6c178d6bb768d8872c97f8.jpg?w=2452&h=920',
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dd741adcce9417d72ea4c1a6dfcc96e2.jpg?thumb=1&w=1226&h=460&f=webp&q=90',
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1226&h=460&f=webp&q=90'

        ],
        list1: [{
          name: '关注',
        }, {
          name: '推荐',
        }, {
          name: '电影'
        }, {
          name: '科技'
        }, {
          name: '音乐'
        }, {
          name: '美食'
        }, {
          name: '文化'
        }, {
          name: '财经'
        }, {
          name: '手工'
        }],
        indexList: [
            {name: '第七颗星星', writer: '李响', title: '第七颗星星'
				} , {name: '第七颗星星', writer: '李响', title: '第七颗星星'
        } , {name: '第七颗星星', writer: '李响', title: '第七颗星星'
        } , {name: '第七颗星星', writer: '李响', title: '第七颗星星'
        } , {name: '第七颗星星', writer: '李响', title: '第七颗星星'
        } , {name: '第七颗星星', writer: '李响', title: '第七颗星星'
        } ,
				],
        current: {
          poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
          name: '致爱丽丝',
          author: '暂无',
          src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
        },
			}
		},
		onLoad() {

		},
		methods: {
      // rightClick() {
      //   console.log('rightClick');
      // },
      // leftClick() {
      //   console.log('leftClick');
      // },
      onSearch() {
        console.log(123)
      }
		}
	}
</script>

<style lang="less" scoped>
//.all {
// display: inline-block;
//}
.bbbb {
  position: fixed;
  left: 0;
  right: 0;
  top: 88rpx;
  z-index: 9999;
}

.wrap {
  padding: 12px;
}

.demo-layout {
  display: inline-flex;
  height: 40px;
  //border-radius: 4px;

}

.bg-purple {

  background: #e5e9f2;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #e5e9f2;
}


.ad-width {
  width: 100%;
  display: flex;
  justify-content: center;
}

.uni-audio-default {
  max-width: 200px;
  border: 1px solid #8f8f94;
  border-radius: 50px;

}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    .logo {
    height: 200rpx;
      width: 200rpx;
      margin-top: 200rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50rpx;
    }
	}
  //
	////.logo {
	////	height: 200rpx;
	////	width: 200rpx;
	////	margin-top: 200rpx;
	////	margin-left: auto;
	////	margin-right: auto;
	////	margin-bottom: 50rpx;
	////}
  //
	//.text-area {
	//	display: flex;
	//	justify-content: center;
	//}
  //
	//.title {
	//	font-size: 36rpx;
	//	color: #8f8f94;
	//}
</style>
